<template>
	<view :style="{'--color':vuex_config.themeColor1,'--price':vuex_config.price}">
		<template v-if="dataForm.pk_id?true:false">
			<sww-swipe :list="swiperList"></sww-swipe>
			<view class="part_statis">
				当前参与活动「<text class="statis_num">{{dataForm.number}}</text>」人
			</view>
			<view class="menu_list">
				<view class="menu_item" v-for="(item,index) in users_list" :key="index">
					<image class="head_img" :src="item.headimgurl"></image>
					<view class="text">{{item.nickname}}</view>
				</view>
			</view>
			<view class="parse_view">
				<u-parse :html="dataForm.details"></u-parse>
			</view>
			<coupon-list :dataList="dataForm.coupon_list"></coupon-list>
			<view class="fix_bot_main" v-if="dataForm.order_count > 0?true :false">
				<view class="fixed_bottom_btn">
					<view class="word">已领取</view>
				</view>
			</view>
			<view class="post_real" v-else-if="dataForm.timeStatus == 3">

				<view class="post_ab">
					<view class="price_box">
						<view>
							<view>支付金额：<text class="price_num">￥{{dataForm.price || 0}}</text></view>
						</view>
					</view>
					<view class="btn" @click="goPay">去支付</view>
				</view>
			</view>
			<view class="fix_bot_main" v-else>
				<view class="fixed_bottom_btn">
					<view class="word" :style="{'background-color':'#dcdcdc'}">
						{{dataForm.timeStatus == 1?'活动未开始':'活动已结束'}}
					</view>
				</view>
			</view>
		</template>
		<sww-pay-class ref="payCheck" @callBack="onPayPrice"></sww-pay-class>
		<sww-login></sww-login>
	</view>
</template>

<script>
	import couponList from './components/couponList.vue'
	import {
		payOrder
	} from '@/mixins/payOrder';
	import {
		wxConfig
	} from '@/mixins/wxConfig';
	import {
		formatDate
	} from '@/utils/moment/index.js';
	export default {
		mixins: [wxConfig, payOrder],
		data() {
			return {
				packageId: null,
				dataForm: {},
				swiperList: [],
				users_list: []
			};
		},
		components: {
			'coupon-list': couponList
		},
		onLoad(options) {
			if (options && options.id) {
				// #ifdef H5
				// h5需要先获取支付和地址的配置
				this.initWxConfig(['chooseWXPay'])
				// #endif
				this.packageId = Number(options.id)
				this.$login('$initPage', null, '$initPage').then(() => {
					this.$initPage()
				})
			}else if(options && options.scene){
				// 二维码跳转的参数
				// console.log('scene',options.scene)
				// #ifdef H5
				// h5需要先获取支付和地址的配置
				this.initWxConfig(['chooseWXPay'])
				// #endif
				this.packageId = Number(options.scene)
				this.$login('$initPage', null, '$initPage').then(() => {
					this.$initPage()
				})
			}
		},
		methods: {
			$initPage(noLoading) {
				if (!noLoading) {
					this.$loading()
				}
				this.$resPost('GetCouponPackageInfo', {
					pk_id: this.packageId
				}).then(({
					data
				}) => {
					if (data.img) {
						this.swiperList = data.img.split(',').map((item) => {
							return {
								img: item
							}
						})
					}
					this.users_list = data.users_list || []
					let start = new Date(data.start_date).getTime()
					let current = new Date().getTime()
					let end = new Date(data.end_date).getTime()
					let timeStatus = 3
					if (current < start) {
						timeStatus = 1 // 未开始
					} else if (current >= end) {
						timeStatus = 2 // 已过期
					}
					this.dataForm = {
						...data,
						timeStatus: timeStatus,
						users_list: null
					}
					if (!noLoading) {
						this.$hide()
					}
				})
			},
			goPay() {
				this.$login('$initPage').then(() => {
					this.$refs.payCheck.open(this.dataForm.price);
				})
			},
			onPayPrice(e) {
				let pay_type = e.pay_type
				this._submitOrder({}, {
						createAble: false,
						modal: false,
					})
					.then(() => {
						let arr = [{
							fk_package_id: this.dataForm.pk_id,
							price: this.dataForm.price,
							num: 1,
							remark: ''
						}]
						let params = {
							total_amount: this.dataForm.price,
							json_detailed: JSON.stringify(arr)
						}
						// 创建订单并支付
						this.createOrder(params, {
							totalPrice: this.dataForm.price,
							pay_type: pay_type,
							orderApi: 'AddOrderCoupon',
							updateApi: 'UpdateOrderStatus',
							redirectUrl: '',
							order_type: 16,
							updateParams: {}
						}).then(() => {
							this.$initPage(true)
							this.addCoupon()
						}).catch((orderId) => {
							this.deleOrder(orderId)
						})
					})
					.catch(() => {});
			},
			// 支付成功回调
			addCoupon() {
				this.$loading()
				// 优惠券领取
				let day = this.dataForm.effective || 1;
				let date = new Date();
				date.setDate(date.getDate() + day);
				date = formatDate(date, 'YYYY-MM-DD HH:mm:ss');
				this.$resPost('AddCouponReceive', {
					coupon_id: this.dataForm.fk_coupon_id,
					date_effective: date
				}).then(() => {
					this.$hide()
					this.$linkTo('/package/user/coupon/index?current=0')
				});
			},
			// 没有支付成功，就取消订单
			deleOrder(orderId) {
				if (!orderId) return
				this.$resPost('DeleteOrderInfo', {
					pk_id: orderId
				})
			},
		},
	};
</script>
<style lang="scss">
	page {
		background-color: $www-theme-bg;
	}
</style>
<style scoped lang="scss">
	.part_statis {
		padding: 24rpx 30rpx;

		.statis_num {
			color: var(--color);
		}
	}

	.menu_list {
		display: flex;
		flex-wrap: wrap;
		padding-bottom: 10rpx;
		background-color: #fff;

		.menu_item {
			width: 20%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 30rpx 0;

			.head_img {
				width: 70rpx;
				height: 70rpx;
				border-radius: 50%;
				overflow: hidden;
			}

			.text {
				margin-top: 10rpx;
				font-size: 24rpx;
			}
		}
	}

	.parse_view {
		margin-top: 2rpx;
		background-color: #fff;
		padding: 10rpx;
	}

	.post_real {
		height: 120rpx;
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.post_ab {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100rpx;
			background-color: #fff;
			box-sizing: content-box;
			display: flex;
			padding-bottom: 0;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);

			.price_box {
				flex: 1;
				overflow: hidden;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				font-weight: bold;
				height: 100%;

				.price_num {
					font-size: 34rpx;
					color: var(--price);
				}
			}

			.btn {
				height: 100%;
				flex: 1;
				overflow: hidden;
				background: var(--color);
				font-size: 30rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;

				&:active {
					opacity: .8;
				}
			}
		}

		.post_no {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100rpx;
			background-color: #fff;
			box-sizing: content-box;
			display: flex;
			padding-bottom: 0;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
		}
	}
</style>
